<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
    <div id="app" class="container">
        <table class="table table-hover" v-if="goods.length">
            <caption>购物车</caption>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" @click="allchange" :checked="allChecked">
                        全选
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in goods">
                    <td><input type="checkbox" name="" @click="mychange(index)" :checked="item.iscreat" id=""></td>
                    <td>{{item.title}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="jian(index)">-</button>
                        {{item.num}}
                        <button @click="jia(index)">+</button>
                    </td>
                    <td><button @click="mydelete(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <div v-else>
            <h1>购物车空空如也</h1>
        </div>
        <div>
            <h1>总价：{{allPrice}}</h1>
        </div>
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {

            allChecked: false,
            goods: [
                {
                    title: "鞋",
                    num: 1,
                    price: 20,
                    iscreat: false
                },
                {
                    title: "手机",
                    num: 2,
                    price: 100,
                    iscreat: true
                },
                {
                    title: "帽子",
                    num: 1,
                    price: 10,
                    iscreat: false
                }
            ]
        },
        computed:{
            allPrice(){
                let num = 0;
                this.goods.forEach(item=>{
                    if(item.iscreat){
                        num += item.price*item.num;
                    }
                })
                return num;
            }
        },
        methods: {
            // 全选
            allchange() {
                this.allChecked = !this.allChecked
                this.goods.forEach(item => {
                    item.iscreat = this.allChecked;
                });
            },
            //单选
            mychange(index) {
                this.goods[index].iscreat = !this.goods[index].iscreat;
                let res = this.goods.every(item => {
                    return item.iscreat;
                })
                // console.log(res);
                this.allChecked = res;
            },
            //删除
            mydelete(index){
                // let res = this.goods.filter((item,i)=>{
                //     return i != index
                // })
                // this.goods = res;
                this.goods.splice(index,1);
            },
            //增加商品
            jian(index){
                if(this.goods[index].num==1){
                    this.goods[index].num=1;
                }else{
                    this.goods[index].num--;
                }
                
            },
            jia(index){
                this.goods[index].num++
            }
        },
    })
</script>

</html>